<template>
  <view v-if="settingStore.settingShow" class="setting-overlay" @click="cancelClick">
    <view class="setting-drawer" @click.stop>
      <view class="setting-header">
        <text class="setting-title">设置</text>
        <view class="close-btn" @click="cancelClick">✕</view>
      </view>
      
      <view class="setting-content">
        <view class="left_shu">全局设置</view>
        <view class="setting_item">
          <text class="setting_label">
            是否进行自动适配
            <text class="setting_label_tip">(默认分辨率1920*1080)</text>:
          </text>
          <view class="setting_content">
            <radio-group @change="isScaleChange" class="radio-group">
              <label class="radio-item">
                <radio value="true" :checked="isScaleRadio" />
                <text>是</text>
              </label>
              <label class="radio-item">
                <radio value="false" :checked="!isScaleRadio" />
                <text>否</text>
              </label>
            </radio-group>
          </view>
        </view>
        
        <view class="left_shu">实时监测</view>
        <view class="setting_item">
          <text class="setting_label">设备提醒自动轮询:</text>
          <view class="setting_content">
            <radio-group @change="leftBottomChange" class="radio-group">
              <label class="radio-item">
                <radio value="true" :checked="leftBottomRadio" />
                <text>是</text>
              </label>
              <label class="radio-item">
                <radio value="false" :checked="!leftBottomRadio" />
                <text>否</text>
              </label>
            </radio-group>
          </view>
        </view>
        
        <view class="setting_item">
          <text class="setting_label">实时预警轮播:</text>
          <view class="setting_content">
            <radio-group @change="rightBottomChange" class="radio-group">
              <label class="radio-item">
                <radio value="true" :checked="rightBottomRadio" />
                <text>是</text>
              </label>
              <label class="radio-item">
                <radio value="false" :checked="!rightBottomRadio" />
                <text>否</text>
              </label>
            </radio-group>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useSettingStore } from '@/stores/index'

const settingStore = useSettingStore()
const { indexConfig } = storeToRefs(settingStore)

const isScaleRadio = ref(false)
const leftBottomRadio = ref(true)
const rightBottomRadio = ref(true)

const init = () => {
  settingStore.initSetting()
  isScaleRadio.value = settingStore.isScale
  leftBottomRadio.value = indexConfig.value.leftBottomSwiper
  rightBottomRadio.value = indexConfig.value.rightBottomSwiper
}
init()

const cancelClick = () => {
  settingStore.setSettingShow(false)
}

const isScaleChange = (e) => {
  isScaleRadio.value = e.detail.value === 'true'
  settingStore.setIsScale(isScaleRadio.value)
}

const leftBottomChange = (e) => {
  leftBottomRadio.value = e.detail.value === 'true'
  updateIndexConfig()
}

const rightBottomChange = (e) => {
  rightBottomRadio.value = e.detail.value === 'true'
  updateIndexConfig()
}

const updateIndexConfig = () => {
  settingStore.setIndexConfig({
    leftBottomSwiper: leftBottomRadio.value,
    rightBottomSwiper: rightBottomRadio.value
  })
}
</script>

<style scoped lang="scss">
.setting-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: flex;
  justify-content: flex-end;
}

.setting-drawer {
  width: 360px;
  height: 100%;
  background-color: #fff;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
}

.setting-header {
  padding: 20px;
  border-bottom: 1px solid #e8e8e8;
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  .setting-title {
    font-size: 20px;
    color: #000;
    font-weight: 900;
  }
  
  .close-btn {
    font-size: 24px;
    color: #999;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    
    &:hover {
      color: #333;
    }
  }
}

.setting-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.left_shu {
  color: #000;
  font-weight: 900;
  position: relative;
  text-indent: 10px;
  padding: 16px 0 10px 0;
  line-height: 1;
  
  &::before {
    display: block;
    content: ' ';
    height: 16px;
    width: 4px;
    border-radius: 2px;
    background: #0072ff;
    position: absolute;
    left: 0px;
  }
}

.setting_item {
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 20px;
  
  .setting_label {
    color: #555454;
    display: block;
    margin-bottom: 10px;
  }
  
  .setting_label_tip {
    font-size: 12px;
    color: #838282;
  }
  
  .radio-group {
    display: flex;
    gap: 20px;
  }
  
  .radio-item {
    display: flex;
    align-items: center;
    gap: 8px;
    
    radio {
      transform: scale(1.2);
    }
    
    text {
      color: #333;
      font-size: 14px;
    }
  }
}
</style>

